<template>
  <scroll-view @scrolltolower="handleTolow" scroll-y class="recommend_view">
    <!-- 推荐开始 -->
    <view class="recommend_wrap">
      <navigator
        class="recommend_items"
        v-for="item in recommedList"
        :key="item.id"
        :url="`/pages/album/index?id=${item.target}`"
      >
        <image :src="item.thumb" mode="widthFix" />
      </navigator>
    </view>
    <!-- 推荐结束 -->

    <!-- 月份开始 -->
    <view class="months_wrap">
      <view class="months_title">
        <view class="months_title_info">
          <view class="months_info">
            <text>{{monthsList.DD}} /</text>
            {{monthsList.MM}} 月
          </view>
          <view class="months_text">{{monthsList.title}}</view>
        </view>
        <view class="months_title_more">更多 ></view>
      </view>
      <view class="months_content">
        <view class="months_items" v-for="(item,index) in monthsList.items" :key="item.id">
          <go-detail :list="monthsList.items" :index="index">
            <image mode="aspectFill" :src="item.thumb+item.rule.replace('$<Height>',360)" />
          </go-detail>
        </view>
      </view>
    </view>
    <!-- 月份结束 -->

    <!-- 热门开始 -->
    <view class="hots_wrap">
      <view class="hots_title">
        <text>热门</text>
      </view>
      <view class="hots_content">
        <view class="hots_items" v-for="(item,index) in hotsList" :key="item.id">
          <go-detail :list="hotsList" :index="index">
            <image mode="widthFix" :src="item.thumb" />
          </go-detail>
        </view>
      </view>
    </view>
    <!-- 热门结束 -->
  </scroll-view>
</template>

<script>
import moment from "moment";
import goDetail from "@/component/goDetail";
export default {
  components: {
    goDetail
  },
  data() {
    return {
      recommedList: [],
      monthsList: [],
      hotsList: [],
      params: {
        limit: 30,
        order: "hot",
        skip: 0
      },
      hasMore: true
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.request({
        url: "http://157.122.54.189:9088/image/v3/homepage/vertical",
        data: this.params
      }).then(res => {
        if (res.res.vertical.length === 0) {
          this.hasMore = false;
          return;
        }

        if (this.recommedList.length === 0) {
          //console.log(res.res.homepage[1].items);
          this.recommedList = res.res.homepage[1].items;
          // console.log(res.res.homepage[2]);
          this.monthsList = res.res.homepage[2];
          this.monthsList.DD = moment(this.monthsList.stime).format("DD");
          this.monthsList.MM = moment(this.monthsList.stime).format("MM");
        }
        this.hotsList = [...this.hotsList, ...res.res.vertical];
      });
    },
    handleTolow() {
      // 1. 修改params参数
      // 2.调用
      // 3.叠加数组
      if (this.params.skip >= 90) {
        this.hasMore = false;
      }
      if (this.hasMore) {
        this.params.skip += this.params.limit;
        this.getList();
        //this.hotsList = [...this.hotsList, ...this.hotsList] 不是在这
      } else {
        uni.showToast({
          title: "不要再滑啦!已经没有啦!!>_<",
          icon: "none"
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.recommend_view {
  height: calc(100vh - 35px);
}

.recommend_wrap {
  display: flex;
  flex-wrap: wrap;
  padding: 5rpx;
  margin-top: 5rpx;
  .recommend_items {
    width: 50%;
    border: 4rpx white solid;
    border-radius: 20rpx;
  }
}

.months_wrap {
  margin-top: 5rpx;
  .months_title {
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    color: $color;
    font-weight: 600;
    margin-bottom: 5rpx;
  }
  .months_title_info {
    display: flex;
    font-size: 30rpx;
  }
  .months_info {
  }
  .months_info text {
    font-size: 36rpx;
  }
  .months_text {
    font-size: 34rpx;
    color: #666;
    padding-left: 20rpx;
  }
  .months_title_more {
  }
  .months_content {
    display: flex;
    flex-wrap: wrap;
    .months_items {
      width: 33.33%;
      border: 5rpx #fff solid;
    }
  }
}

.hots_wrap {
  .hots_title {
    padding: 20rpx;
    text {
      border-left: solid $color 10rpx;
      padding-left: 10rpx;
      font-size: 30rpx;
      font-weight: 600;
    }
  }
  .hots_content {
    display: flex;
    flex-wrap: wrap;
  }
  .hots_items {
    width: 33.33%;
    border: 5rpx #fff solid;
  }
}
</style>